<?php
require_once 'layout.php';

$title = "页面未找到 - 404";
$currentPage = "";

$content = '
<section class="section" style="padding: 120px 0; text-align: center;">
    <div class="container">
        <div class="error-content">
            <div class="error-icon" style="margin-bottom: 30px;">
                <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" style="opacity: 0.3;">
                    <circle cx="60" cy="60" r="50" fill="none" stroke="var(--text-light)" stroke-width="2"/>
                    <path d="M40 45l40 40M80 45l-40 40" stroke="var(--text-light)" stroke-width="3" stroke-linecap="round"/>
                    <circle cx="45" cy="45" r="3" fill="var(--text-light)"/>
                    <circle cx="75" cy="45" r="3" fill="var(--text-light)"/>
                </svg>
            </div>
            
            <h1 style="font-size: 6rem; color: var(--primary-blue); margin-bottom: 20px; font-weight: bold;">404</h1>
            <h2 style="font-size: 2rem; color: var(--text-dark); margin-bottom: 20px;">页面未找到</h2>
            <p style="font-size: 1.2rem; color: var(--text-light); margin-bottom: 40px; max-width: 500px; margin-left: auto; margin-right: auto;">
                抱歉，您访问的页面不存在或已被移除。请检查URL是否正确，或选择以下选项继续浏览。
            </p>
            
            <div class="error-actions" style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
                <a href="/" class="btn btn-primary">返回首页</a>
                <a href="/products" class="btn btn-outline">浏览产品</a>
                <a href="/contact" class="btn btn-outline">联系我们</a>
            </div>
            
            <div class="search-section" style="margin-top: 60px;">
                <h3 style="color: var(--text-dark); margin-bottom: 20px;">您可能在寻找：</h3>
                <div class="quick-links" style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
                    <a href="/products" style="color: var(--primary-blue); text-decoration: none; padding: 8px 16px; background: var(--bg-light); border-radius: 20px; font-size: 0.9rem;">SSL证书产品</a>
                    <a href="/automation" style="color: var(--primary-blue); text-decoration: none; padding: 8px 16px; background: var(--bg-light); border-radius: 20px; font-size: 0.9rem;">ACME自动化</a>
                    <a href="/help" style="color: var(--primary-blue); text-decoration: none; padding: 8px 16px; background: var(--bg-light); border-radius: 20px; font-size: 0.9rem;">帮助中心</a>
                    <a href="/contact" style="color: var(--primary-blue); text-decoration: none; padding: 8px 16px; background: var(--bg-light); border-radius: 20px; font-size: 0.9rem;">技术支持</a>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.quick-links a:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .error-content h1 {
        font-size: 4rem !important;
    }
    
    .error-content h2 {
        font-size: 1.5rem !important;
    }
    
    .error-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .error-actions .btn {
        width: 100%;
        max-width: 200px;
    }
    
    .quick-links {
        flex-direction: column;
        align-items: center;
    }
    
    .quick-links a {
        width: 200px;
        text-align: center;
    }
}
</style>
';

renderPage($title, $content, $currentPage);
?>